<template>
  <div class="background">
    <titleComponent :index="0"  :originName="'client'"></titleComponent>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <!-- 服务区 -->
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in dmyItems" @click="dmyClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!-- 车型流量 -->
        <div class="content_info_item">
          <contentTitle :title="'客流结构'"/>
          <div class="yz-content-bg" style="display: block">
            <div class="yz-sm-title">性别分布</div>
            <div class="yx-xs">
              <div class="yx-xs-6">
                <div class="yx-car-item man"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    男
                    <span>{{sexRef.mancount}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    {{sexRef.manzb}}
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    {{sexRef.womencount}}
                    <span>女</span>
                  </div>
                  <div class="yx-car-content-num">
                    {{sexRef.womenzb}}
                  </div>
                </div>
                <div class="yx-car-item women"></div>
              </div>
            </div>
            <div class="yz-sm-title">年龄分布</div>
            <div style="height: 8vh" ref="nlfbRef"></div>
          </div>
        </div>
        <!-- 年度服务区客流量排行（前10） -->
        <div class="content_info_item">
          <contentTitle :title="'服务区客流量排行（前10）'"/>
          <div class="yz-content-bg" style="display: block">
            <div class="chart" ref="fwqkllphRef"></div>
          </div>
        </div>
        <!-- 客流对比 -->
        <div class="content_info_item">
          <contentTitle :title="'客流对比'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="ndkldbRef"></div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="yz-box-item-colums">
              <div class="yz-box-item-colum" v-for="(item,index) in carFlowZoneOptions" @click="zoneClick(index)">
                <div class="yx-li yx-li-select" v-if="item.selected">{{item.name}}</div>
                <div class="yx-li" v-else>{{item.name}}</div>
              </div>
            </div>
            <div class="car_flow_text">{{ carFlowOptions.carFlowText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in carFlowOptions.carFlowNum">
                <div v-if="isNumeric(item)">
                 <!-- 有背景图，然后把数字拆分  -->
                 <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万人</div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-traffic>
        <!-- 下面legend -->
        <div class="map-legend" style="display: none;">
          <!-- <div class="map-legend-item">
            <el-image :src="bigIcon"></el-image>
            <span>大</span>
          </div>
          <div class="map-legend-item">
            <el-image :src="middleIcon"></el-image>
            <span>中</span>
          </div>
          <div class="map-legend-item">
            <el-image :src="smallIcon"></el-image>
            <span>小</span>
          </div> -->
          <div class="map-legend-item" title="车位占用率>=100%">
            <el-image :src="black_coffic"></el-image>
            <span>拥堵</span>
          </div>
          <div class="map-legend-item" title="车位占用率>=80%">
            <el-image :src="black_grey"></el-image>
            <span>繁忙</span>
          </div>
          <div class="map-legend-item" title="车位占用率<80%">
            <el-image :src="black_green"></el-image>
            <span>空闲</span>
          </div>
          <div class="map-legend-item" title="服务区关闭状态">
            <el-image :src="black_symbol" ></el-image>
            <span>关闭</span>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-box2-items">
          <div class="yz-box2-item" style="width: 25%">
            <div class="box-top-left"></div>
            <div class="yz-box2-p">{{rcklb}}%</div>
            <div class="yz-box2-p center">入场客流比</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ruceklb}}%</div>
            <div class="yz-box2-p center">入厕客流比</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{klgx}}</div>
            <div class="yz-box2-p center">客流贡献度</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ckzhxs}}</div>
            <div class="yz-box2-p center">车客转换系数</div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'客流年龄结构'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="klnljgbRef"></div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'客流变化'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="rsdklbhRef"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'节假日客流分析'"/>
          <div class="yz-content-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" data-level="2" v-for="(item,index) in jjrklfx_navs" @click="jjrcfxClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div class="chart" ref="jjrklfxRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部菜单 -->
  <bottom-menu></bottom-menu>
  <!-- 服务区弹出框 -->
  <!-- <traffic-layer :title="layerTitle" :compid="layerId" @closeLayers="closeLayers" v-if="showLayers"></traffic-layer> -->
  <!-- -->
  <more-panel-layer v-if="showMorePanelLayer"></more-panel-layer>

</template>
<script setup>
import titleComponent from "./components/title.vue"
import contentTitle from "./components/contentTitle.vue"
import './../assets/content.css'
import {getCurrentInstance, onMounted, ref, reactive, watch, toRaw} from "vue";
import {drawLine} from "../util/chartUtil.js";
import MapTraffic from "./components/mapTraffic.vue";
import 'dayjs/locale/zh-cn'; // 导入中文语言包

import bigIcon from '../assets/img/yzclientflow/p1.png';
import middleIcon from '../assets/img/yzclientflow/p2.png';
import smallIcon from '../assets/img/yzclientflow/p3.png';
import black_symbol from '../assets/img/yztraffic/4.png';
import black_green from '../assets/img/yztraffic/3.png';
import black_coffic from '../assets/img/yztraffic/1.png';
import black_grey from '../assets/img/yztraffic/2.png';
import {CountTo} from 'vue3-count-to';
import trafficLayer from './components/trafficLayer.vue'
import bottomMenu from './components/bottomMenu.vue';
import {ajaxRequest} from "../api/code.js";
import MorePanelLayer from "./components/traffic_more/trafficMoreLayer.vue";
const chart = getCurrentInstance().proxy.$echarts

const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}
//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [
  {
    id: null,
    value: '请选择服务区',
    label: '请选择服务区'
  }, {
    id: 1190643,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 1190637,
    value: '山海关服务区',
    label: '山海关服务区'
  }, {
    id: 1190645,
    value: '玉田服务区',
    label: '玉田服务区'
  }, {
    id: 1190646,
    value: '丰润停车区',
    label: '丰润停车区'
  }, {
    id: 1190644,
    value: '迁安停车区',
    label: '迁安停车区'
  }, {
    id: 1190642,
    value: '卢龙服务区',
    label: '卢龙服务区'
  }, {
    id: 1190641,
    value: '北戴河服务区',
    label: '北戴河服务区'
  }, {
    id: 1190859,
    value: '香河服务区',
    label: '香河服务区'
  }]
}])
async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

getFwqxx();
//服务区默认不弹出
const showLayers = ref(false);

const showMorePanelLayer = ref(false);
const closeMorePanelLayer = function () {
  showMorePanelLayer.value = false;
}

let compid=null;
const serverHandleChange = (selectItem) => {
  
  // console.log(selectItem[1]);
  if(selectItem){
    compid = findIdByValue(selectItem[1])
  }else{
    compid=null
  }
  showLayers.value = true;
   getClientFlowYears()
   getClientFlowT7days()
   getClientFlowHolidays()
   getThisYearClienFlow()
   getKlzb()
   getCurYearClientFlowAge()
   getCurYearClientFlowSex()
   get7DaysClientFlowAge()
}

const closeLayers = function () {
  showLayers.value = false;
}
function findIdByValue(value) {  
  const options = selectOptions.value;  
  
  // 首先检查顶级选项  
  for (const option of options) {  
    if (option.value === value) {  
      return option.id;  
    }  
  
    // 然后检查子选项  
    for (const child of option.children) {  
      if (child.value === value) {  
        return child.id;  
      }  
    }  
  }  
  // 如果没有找到匹配的 label，返回 null 或其他表示未找到的值  
  return null;  
}  
//ab选择
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);

const abClick = function (selectIndex){
  abItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    areacode.value = null
  }
  else if(selectIndex === 1){
    areacode.value='01'
  }
  else if(selectIndex === 2){
    areacode.value='02'
  }
  updateDatas()
}
const dmyItems = ref([{
  name:"年", 
  selected: false
},{
  name:"月",
  selected: false
},{
  name:"日",
  selected: true
}
]);
const dmyType = ref('day')
const dmyClick = function (selectIndex){
  dmyItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    dmyType.value = 'year'
  }
  else if(selectIndex === 1){
    dmyType.value = 'month'
  }
  else if(selectIndex === 2){
    dmyType.value = 'day'
  }
  //切换分区刷新数据 
  updateDatas()
}
// 年龄分布
const nlfb_x = ref(['18以下', '18-24', '25-34', '35-56','57-67', '68以上'])
const nlfb_y = ref([2400000, 564000, 201000,332000 , 90000 , 30000])
const nlfbRef = ref();
const nlfbOpt = ref({
  grid: {
    top: '10%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    show: true,
    type: 'category',
    axisTick:{
      show: false
    },
    axisLine:{
      show: false
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 8
      }
    },
    data: nlfb_x
  },
  yAxis: {
    type: 'value',
    splitNumber: 3,
    splitLine: {
      show: false
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 8
      }
    }
  },
  series: [
    {
      data: nlfb_y,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#50E4DF'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});

//年度服务区客流量排行（前10）
const fwqkllph_x = ref(['滦州服务区', '山海关服务区', '玉田服务区', '丰润停车区', '迁安停车区', '卢龙服务区', '北戴河服务区', '香河服务区', '南宫服务区', '宁晋服务区'])
const fwqkllph_y = ref([140, 232, 101, 264, 90, 340, 250, 232, 101, 264])

const fwqkllphRef = ref();
const fwqkllphOpt = ref({
  grid: {
    top: '24%',
    left: '10%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisTick:{
      show: false
    },
    axisLabel: {
      interval:0,
      rotate: 45,
      textStyle: {
        color: 'white',
        fontSize: 8
      }
    },
    data: fwqkllph_x
  },
  yAxis: {
    type: 'value',
    name: "万人",
    splitNumber: 4,
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-30
      ]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(39, 163, 212, 0.52)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 8
      }
    }
  },
  series: [
    {
      data: fwqkllph_y,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#50E4DF'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});


/* 中间车流量统计 */
const carFlowZoneOptions = ref([{name: '外场',selected:false}, {name: '内场',selected: true}])
const carFlowOptions = ref({
  carFlowText: "今日客流",
  carFlowNum: "0"
})
const zoneClick = function (selectIndex){
  carFlowZoneOptions.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  getThisYearClienFlow()
}





//年度车流对比
const currentYear = new Date().getFullYear();
    // 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const ndkldb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const ndkldb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const ndkldb_y_1 = ref([140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340, 250])
const ndkldb_y_2 = ref([120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340, 310])
const ndkldbRef = ref();
const ndkldbOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ndkldb_legend.value,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ndkldb_x.value,
      axisTick: {
        show: false
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        rotate: 45,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万人",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-30
        ]
      },
      splitNumber: 4,
      axisLabel: { // 设置轴标签样式
        textStyle: {
          color: 'white' // 设置轴标签颜色
        }
      },
      splitLine: { //网格线：隐藏
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed', // 线型为虚线
        }
      },
    }
  ],
  series: [
    {
      name: ndkldb_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndkldb_y_1.value
    },
    {
      name: ndkldb_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndkldb_y_2.value
    }
  ]
});

//客流年龄结构比
const data_legend = ref(['18以下', '18-24', '25-34', '35-56','57-67', '68以上']);
const data_x = ref([1221,1211,1221,1200,1100,1100]);
const data_20 = ref(data_x.value[0]); //20人数： 12人
const data_20_30 = ref(data_x.value[1]); //20-30人数： 12人
const data_30_40 = ref(data_x.value[2]); //30-40人数： 12人
const data_40_50 = ref(data_x.value[3]); //30-40人数： 12人
const data_50 = ref(data_x.value[4]); //50以上人数： 12人
const data_total = ref(data_20.value + data_20_30.value + data_30_40.value + data_40_50.value + data_50.value); //总人数

//处理数据 不用管
const date_bar_2 = data_20.value + data_20_30.value;
const data_bar_3 = date_bar_2 + data_30_40.value;
const data_bar_4 = data_bar_3 + data_40_50.value;
const data_bar_5 = data_bar_4 + data_50.value;
const klnljgbRef = ref();
const klnljgbOpt = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    data: data_legend.value,
    right: '10%',
    top: '18%',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 11
    },
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    formatter: function (params) {
      const x = data_x.value[data_legend.value.indexOf(params)];
      const t = data_total.value;
      const rate = t == 0 ? 0 : (x / t * 100).toFixed(2);
      return `${params}   ${rate}% `;
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['78%', '90%'],
      center: ['35%', '65%'],
      label: {
        show: false // 添加这一行以隐藏数据标签
      },
      startAngle: 180,
      endAngle: 360,
      data: [
      // '18以下', '18-24', '25-34', '35-56','57-67', '68以上'
        { value: 1048, name: '18以下' },
        { value: 735, name: '18-24' },
        { value: 580, name: '25-34' },
        { value: 484, name: '35-56' },
        { value: 300, name: '57-67' },
        { value: 300, name: '68以上' }
      ]
    }
  ],
  graphic: {
    type: 'text',
    left: '27%',
    bottom: '32%', // 调整位置以适应你的图表布局
    style: {
      rich: {
        a: {
          fontSize: 26,
          color: 'white', // 确保字体颜色为白色
          fontWeight: 'bold'
        },
        b: {
          fontSize: 14,
          color: 'white', // 确保字体颜色为白色
        }
      },
      text: '{a|' + (1048 + 735 + 580 + 484 + 300) + '}\n\n{b|总客流}', // 计算总数并显示
      textAlign: 'center',
      fill: 'white'
    }
  }
});

//近七日时段客流变化
const rsdklbh_x = ref(['0-4点', '5-8点', '9-12点', '13-16点', '17-20点', '21-24点'])
const rsdklbh_y = ref([140, 232, 101, 264, 90, 340])
const rsdklbhRef = ref();
const rsdklbhOpt = ref({
  color: ['#F7B500'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '18%',
    left: '8%',
    right: '8%',
    bottom: '13%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: rsdklbh_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        rotate: 45,
        textStyle: {
          color: 'white',
          fontSize: 10
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "人",
      splitNumber:4,
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: rsdklbh_y.value
    }
  ]
});

//节假日客流分析
const jjrklfx_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const jjrklfx_x = ref(['1天', '2天', '3天', '4天', '5天', '6天', '7天'])
const jjrklfx_y_1 = ref([140, 232, 101, 264, 90, 340, 250])
const jjrklfx_y_2 = ref([120, 282, 111, 234, 220, 340, 310])
const jjrklfx_navs = ref([{name:'元旦',selected:false},{name:'春节',selected:true},{name:'清明',selected:false},{name:'五一',selected:false}])
const jjrcfxClick = function (selectIndex){
  jjrklfx_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  getClientFlowHolidays()
}
const jjrklfxRef = ref();
const jjrklfxOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrklfx_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: jjrklfx_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "人",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: jjrklfx_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrklfx_y_1.value
    },
    {
      name: jjrklfx_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrklfx_y_2.value
    }
  ]
});

let nlfbChart, fwqkllphChart, ndkldbChart, jjrklfxChart,klnljgbChart,rsdklbhChart;

onMounted(() => {
  nlfbChart = drawLine(nlfbRef.value,nlfbOpt.value);//年龄分布
  fwqkllphChart = drawLine(fwqkllphRef.value, fwqkllphOpt.value);//服务区客流量排行
  ndkldbChart = drawLine(ndkldbRef.value,ndkldbOpt.value);//年度客流对比
  klnljgbChart = drawLine(klnljgbRef.value,klnljgbOpt.value);//客流年龄结构比
  rsdklbhChart = drawLine(rsdklbhRef.value,rsdklbhOpt.value);//日时段客流变化
  jjrklfxChart = drawLine(jjrklfxRef.value, jjrklfxOpt.value);//节假日客流分析
  updateDatas()
  refreshData()
  initMap(); //加载地图
})
function updateDatas(){
  getTop10()
  getClientFlowYears()
  getClientFlowT7days()
  getClientFlowHolidayInfo()
  getThisYearClienFlow()
  getKlzb()
  getCurYearClientFlowAge()
  getCurYearClientFlowSex()
  get7DaysClientFlowAge()
}
/****************************地图相关代码start************************************* */
//弹框事件
/**初始化地图数据**/
const mapData = ref({
      showLabel:false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          item: 1,
          symbol: black_coffic,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          item: 11234,
          symbol: black_grey,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
      ]
    }
)
/**初始化地图数据**/
const areacode = ref(null)
async function initMap() {
  mapData.value.data = []
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getCompData', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item,index) => {
      let lab
      let symb
      // if (item.status == 1) {
      //   lab = "关闭"
      //   symb = black_symbol
      // } else if (item.bhd >= 100) {
      //   lab = "拥堵"
      //   symb = black_coffic
      // } else if (item.bhd >= 80) {
      //   lab = "繁忙"
      //   symb = black_grey
      // } else {
      //   lab = "空闲"
      //   symb = black_green
      // }
      lab = "空闲"
      symb = black_green
      mapData.value.data[index] = {
        compid:item.id,
        title : item.compname,
        lng : item.longitude,
        lag : item.latitude,
        symbol : symb,
        label : lab
      };
    })
  }

};
const curServer = ref("")
//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  compid=item.compid
  //刷新数据
  updateDatas()
}
/****************************地图相关代码end************************************* */
let timer
const refreshData = () => {
  timer = setInterval(async () => {

    await getTop10()
    await getClientFlowYears()
    await getClientFlowT7days()
    await getClientFlowHolidays()
    await getThisYearClienFlow()
    await getCurYearClientFlowAge()
    await getCurYearClientFlowSex()
    await get7DaysClientFlowAge()
    getKlzb()
    // await getCurrentMonthWtElct(0)
    // await getCurrentMonthWtElct(1)
  }, 120000)
}
// 函数来获取所有selected为true的name
function getSelectedNames() {
  // 使用filter方法过滤出所有selected为true的对象
  const selectedItems = abItems.value.filter(item => item.selected);

  // 使用map方法提取每个对象的name属性
  const selectedNames = selectedItems.map(item => item.name);
  if(selectedNames[0]=='东(南)'){
    return '01'
  }
  if(selectedNames[0]=='西(北)'){
    return '02'
  }
  return '';
}
async function getTop10() {
  const params = {
    areaname: getSelectedNames(),
    dateType:dmyType.value
  }
  ajaxRequest('post', 'getClientFlowTop10', params).then(res => {
    fwqkllph_y.value = [];
    fwqkllph_x.value = [];
    if (res.rows && res.rows.length > 0) {
      res.rows.forEach(function (item) {
        fwqkllph_y.value.push(item.count/10000)
        fwqkllph_x.value.push(item.compname)
      });
    }
    fwqkllphOpt.value.series[0].data = fwqkllph_y.value
    fwqkllphOpt.value.xAxis.data = fwqkllph_x.value
    fwqkllphChart.setOption(fwqkllphOpt.value)
  })
}
function getCurrentMonthDaysArray() {
    // 获取当前日期
    const now = new Date();
    // 获取当前年份
    const year = now.getFullYear();
    // 获取当前月份，注意月份是从0开始的，所以要+1
    const month = now.getMonth() + 1;
    // 获取指定年份和月份的天数
    // 注意Date对象的第二个参数是月份（0-11），第三个参数是日期（1-31）
    // 创建一个指定月份的第一天，然后将日期设置为下个月的第一天，再减去1天即可得到当月的天数
    const daysInMonth = new Date(year, month, 0).getDate();
    // 创建一个长度为当前月份天数的数组，所有元素初始化为0
    const daysArray = Array.from({ length: daysInMonth }, () => 0);
    return daysArray;
}
async function getClientFlowT7days() {
  const params = {
    compid:compid,
    areaname: getSelectedNames(),
    dateType:dmyType.value
  }
  if(dmyType.value=='day'){
    rsdklbh_x.value = getTime()
  }else if(dmyType.value=='month'){
    rsdklbh_x.value = getDaysCn()
  }else{
    rsdklbh_x.value = getMonthCn()
  }
  ajaxRequest('post', 'getClientFlowT7days', params).then(res => {
    rsdklbh_y.value = [];
    if (res.rows && res.rows.length > 0) {
      for (let index = 0; index < res.rows.length; index++) {
        const item = res.rows[index];
        rsdklbh_y.value[item.intervalstart]=item.count
      }
    }
    rsdklbhOpt.value.xAxis[0].data = rsdklbh_x.value
    rsdklbhOpt.value.series[0].data = rsdklbh_y.value
    if(dmyType.value=='month'){
      rsdklbhOpt.value.xAxis[0].axisLabel.interval=1
    }else{
      rsdklbhOpt.value.xAxis[0].axisLabel.interval=0
    }
    rsdklbhChart.setOption(rsdklbhOpt.value)
  })
}
async function getClientFlowYears() {
  const params = {
    compid:compid,
    areaname: getSelectedNames(),
    dateType:dmyType.value
  }
  //比较时间段 年月日
  ajaxRequest('post', 'compareTimePeriodData', params).then(res => {
    ndkldb_y_1.value = [];
    ndkldb_y_2.value = [];
    const now = new Date();
    if (res.rows && res.rows.length > 0) {
      ndkldb_legend.value=[]
    }
    if(dmyType.value=='day'){//日
      res.rows.forEach(function (item) {
        const currentDate = now.getDate() + '号';
        if(item.daterange !== currentDate){
          let num = parseInt(item.intervalstart);
          let value = item.totalenternumber / 10000;
          ndkldb_y_1.value[num] = (Math.floor(value * 100) / 100).toFixed(2);
        }else {
          let num1 = parseInt(item.intervalstart);
          let value = item.totalenternumber / 10000;
          ndkldb_y_2.value[num1] = (Math.floor(value * 100) / 100).toFixed(2);
        }
        addNdkldbLegend(item.daterange);
      });

      ndkldbOpt.value.xAxis[0].data = getTime()
      ndkldbOpt.value.xAxis[0].axisLabel.interval=0
    }else if(dmyType.value=='month'){//月

      res.rows.forEach(function (item) {
        if( item.daterange.indexOf( now.getMonth() + 1+'月') == -1){
          let num = item.intervalstart-1;
          let value = item.totalenternumber / 10000;
          ndkldb_y_1.value[num] = (Math.floor(value * 100) / 100).toFixed(2);
        }else {
          let num1 = item.intervalstart-1;
          let value = item.totalenternumber / 10000;
          ndkldb_y_2.value[num1] = (Math.floor(value * 100) / 100).toFixed(2);
        }
        addNdkldbLegend(item.daterange);
      });

      ndkldbOpt.value.xAxis[0].data = getDaysCn()
      ndkldbOpt.value.xAxis[0].axisLabel.interval=1
    }else{

      res.rows.forEach(function (item) {
        if( item.daterange.indexOf( now.getFullYear() +'') == -1){
          let num = item.intervalstart-1;
          let value = item.totalenternumber / 10000;
          ndkldb_y_1.value[num] = (Math.floor(value * 100) / 100).toFixed(2);
        }else {
          let num1 = item.intervalstart-1;
          let value = item.totalenternumber / 10000;
          ndkldb_y_2.value[num1] = (Math.floor(value * 100) / 100).toFixed(2);
        }
        addNdkldbLegend(item.daterange);
      });

      ndkldbOpt.value.xAxis[0].data = getMonthCn()
      ndkldbOpt.value.xAxis[0].axisLabel.interval=0
    }
    ndkldbOpt.value.legend.data =ndkldb_legend.value
    ndkldbOpt.value.series[0].name =ndkldb_legend.value[0]
    ndkldbOpt.value.series[1].name =ndkldb_legend.value[1]
    ndkldbOpt.value.series[0].data = ndkldb_y_1.value
    ndkldbOpt.value.series[1].data = ndkldb_y_2.value
    ndkldbChart.setOption(ndkldbOpt.value)
  })
}
function addNdkldbLegend(dateType){
  for (let index = 0; index < ndkldb_legend.value.length; index++) {
    const element = ndkldb_legend.value[index];
    if(dateType===element){
        return 
    }
  }
  ndkldb_legend.value.push(dateType)
}
function isCurrent(){
  const now = new Date();
  const year = now.getFullYear();
    // 获取当前月份，注意月份是从0开始的，所以要+1
  const month = now.getMonth() + 1;
  const day = now.getDay()
}
function getTime(){
  // return ['0-4点', '5-8点', '9-12点', '13-16点', '17-20点', '21-24点']
  return ['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点',
              '12-14点', '14-16点', '16-18点', '18-20点', '20-22点', '22-24点']
}
function getMonthCn(){
  return ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
function getDaysCn(){
  let days = getCurrentMonthDaysArray()
  let daysCn=[]
  for (let index = 0; index < days.length; index++) {
    daysCn.push((index+1)+'日')
  }
  return daysCn
}

async function getClientFlowHolidayInfo() {
  const params = {
    areaname: getSelectedNames()
  }
  ajaxRequest('post', 'getClientFlowHolidayInfo', params).then(res => {
    jjrklfx_navs.value = [];
    if (res.rows && res.rows.length > 0) {
      // {name:'元旦',selected:false}
      res.rows.forEach(function (item) {
        jjrklfx_navs.value.push({
          name:item.express,
          selected:false,
          id:item.id
        })
      });
      jjrklfx_navs.value[0].selected=true
      getIdByHoliday()
      getClientFlowHolidays()
    }
  })
}
function getIdByHoliday(){

  for (const key in jjrklfx_navs.value) {
    if(jjrklfx_navs.value[key].selected==true){
      return jjrklfx_navs.value[key].id
    }
  }
}
async function getClientFlowHolidays() {
  let id = getIdByHoliday()
  const params = {
    compid:compid,
    areaname: getSelectedNames(),
    typeid:id
  }
  ajaxRequest('post', 'getClientFlowHolidays', params).then(res => {
    jjrklfx_x.value = [];
    jjrklfx_y_1.value = [];
    jjrklfx_y_2.value = [];
    if (res.rows ) {
      for (let index = 0; index < res.rows.length; index++) {
        let item = res.rows[index];

        if(jjrklfx_legend.value[0].indexOf(item.year+'')!=-1){
          jjrklfx_y_1.value.push(item.count)
        }else if(jjrklfx_legend.value[1].indexOf(item.year+'')!=-1){
          jjrklfx_y_2.value.push(item.count)
        }
      }
      if(jjrklfx_y_2.value.length>jjrklfx_y_1.value.length){
        for (let index = 0; index < jjrklfx_y_2.value.length; index++) {
          jjrklfx_x.value.push((index+1)+'天')
        }
      }else{
        for (let index = 0; index < jjrklfx_y_1.value.length; index++) {
          jjrklfx_x.value.push((index+1)+'天')
        }
      }
    }
    jjrklfxOpt.value.xAxis[0].data = jjrklfx_x.value
    jjrklfxOpt.value.series[0].data = jjrklfx_y_1.value
    jjrklfxOpt.value.series[1].data= jjrklfx_y_2.value
    jjrklfxChart.setOption(jjrklfxOpt.value)
  })
}
function getSelectZoneName(){
  let name=''
  carFlowZoneOptions.value.forEach(item=>{
    if(item.selected==true){
      name = item.name
    }
  })
  return name;
}
async function getThisYearClienFlow() {
  const params = {
    compid:compid,
    areaname: getSelectedNames(),
    type:(getSelectZoneName()==='内场'?2:1)+'',
    dateType:dmyType.value
  }
  ajaxRequest('post', 'getThisYearClienFlow', params).then(res => {
    if (res.rows && res.rows.length > 0) {
      res.rows.forEach(function (item) {
        if(item&&item.count){
          carFlowOptions.value.carFlowNum=(Math.floor(item.count / 10000 * 100) / 100).toFixed(2) + '';
        }else{
          carFlowOptions.value.carFlowNum='0'
        }
      });
    }
  })
  if(dmyType.value==='year'){
    carFlowOptions.value.carFlowText= "本年客流"
  }else if(dmyType.value==='month'){
    carFlowOptions.value.carFlowText= "本月客流"
  }else{
    carFlowOptions.value.carFlowText= "今日客流"
  }
}
const rcklb = ref(18);
const ruceklb = ref(20);
const klgx = ref(25);
const ckzhxs = ref(3.0);
async function getKlzb() {
  const params = {
    compid:compid,
    areaname: getSelectedNames(),
    dateType:dmyType.value
  }
  ajaxRequest('post', 'getKlzb', params).then(res => {
    if (res.rows && res.rows.length > 0) {
        res.rows.forEach(function (item) {
          rcklb.value=item.rcklb+''
          ruceklb.value=item.ruceklb+''
          klgx.value=item.klgx+''
          ckzhxs.value=item.ckzhxs+''
      });
    }
  })
}
const sexRef = ref({
  mancount:2231,
  manzb:"60%",
  womencount:1600,
  womenzb:"40%",
})
function getSelectedAreaid() {
  // 使用filter方法过滤出所有selected为true的对象
  const selectedItems = abItems.value.filter(item => item.selected);

  // 使用map方法提取每个对象的name属性
  const selectedNames = selectedItems.map(item => item.name);
  if(selectedNames[0]=='东(南)'){
    return '1177350'
  }
  if(selectedNames[0]=='西(北)'){
    return '1177351'
  }
  return '';
}

async function getCurYearClientFlowAge() {
  const params = {
    compid:compid,
    areaid: getSelectedAreaid(),
    dateType:dmyType.value
  }
  ajaxRequest('post', 'getCurYearClientFlowAge', params).then(res => {
    nlfb_y.value = []
    if (res.rows && res.rows.length > 0) {
        nlfb_y.value = []
        res.rows.forEach(function (item) {
          nlfb_y.value.push(item.age18)
          nlfb_y.value.push(item.age24)
          nlfb_y.value.push(item.age34)
          nlfb_y.value.push(item.age56)
          nlfb_y.value.push(item.age67)
          nlfb_y.value.push(item.age68)
      });
    }
    nlfbOpt.value.series[0].data = nlfb_y.value
    nlfbChart.setOption(nlfbOpt.value)
  })
}
async function getCurYearClientFlowSex() {
  const params = {
    compid:compid,
    areaid: getSelectedAreaid(),
    dateType:dmyType.value
  }
  ajaxRequest('post', 'getCurYearClientFlowSex', params).then(res => {
    sexRef.value.mancount=0;
    sexRef.value.womencount=0;
    sexRef.value.manzb='0%'
    sexRef.value.womenzb='0%'
    if (res.rows && res.rows.length > 0) {
        res.rows.forEach(function (item) {
            sexRef.value.mancount=item.genderg1
            sexRef.value.womencount=item.genderg2
      });
      let total = sexRef.value.mancount+sexRef.value.womencount
      let mzb = total!=0?Math.round((Number((sexRef.value.mancount / total).toFixed(2)) * 100)):0
      sexRef.value.manzb= mzb + '%';
      sexRef.value.womenzb= mzb!=0?(100-mzb)+'%':'0%'
    }
  })
}
async function get7DaysClientFlowAge() {
  const params = {
    compid:compid,
    areaid: getSelectedAreaid(),
    dateType:dmyType.value
  }
  ajaxRequest('post', 'get7DaysClientFlowAge', params).then(res => {
    data_x.value = []
    if (res.rows && res.rows.length > 0) {
      for (let index = 0; index < res.rows.length; index++) {
        let item = res.rows[index];
        data_x.value.push(item.age18)
        data_x.value.push(item.age24)
        data_x.value.push(item.age34)
        data_x.value.push(item.age56)
        data_x.value.push(item.age67)
        data_x.value.push(item.age68)
      }
    }
    data_total.value = data_x.value[0]+data_x.value[1]+data_x.value[2]+data_x.value[3]+data_x.value[4]+data_x.value[5]
    // data_20.value=data_x.value[0]
    // data_20_30.value=data_x.value[1]
    // data_30_40.value=data_x.value[2]
    // data_40_50.value=data_x.value[3]
    // data_50.value=data_x.value[4]
    // data_x.value[5]=300
    // let db2 = data_20.value + data_20_30.value;
    // let db3 = db2 + data_30_40.value;
    // let db4 = db3 + data_40_50.value;
    klnljgbOpt.value.series[0].data[0].value=data_x.value[0]
    klnljgbOpt.value.series[0].data[1].value=data_x.value[1];
    klnljgbOpt.value.series[0].data[2].value=data_x.value[2];
    klnljgbOpt.value.series[0].data[3].value=data_x.value[3];
    klnljgbOpt.value.series[0].data[4].value=data_x.value[4];
    klnljgbOpt.value.series[0].data[5].value=data_x.value[5];
    let valLeft = calculateLeftPositionByDigitCount(data_total.value)
    klnljgbOpt.value.graphic.style.text='{a|' + data_total.value + '}\n\n{b|总客流}'
    klnljgbOpt.value.graphic.left=valLeft;
    klnljgbChart.setOption(klnljgbOpt.value)
  })
}
function calculateLeftPositionByDigitCount(number) {
  // 将数字转换为字符串以获取其位数
  const digitCount = String(number).length;
  
  // 基准位置：6位数时的left百分比
  const baseLeftPercent = 26;
  
  // 位数差异对left百分比的影响（这是一个经验值，可能需要根据实际情况调整）
  // 假设每减少一位数，left百分比增加1（这个值可能需要根据实际字符宽度和图表容器宽度调整）
  const percentPerDigitDifference = 1;
  
  // 计算left百分比
  const leftPercent = baseLeftPercent - ( digitCount- 6) * percentPerDigitDifference;
  
  // 确保left百分比在0%到100%之间
  const clampedLeftPercent = Math.max(0, Math.min(100, leftPercent.toFixed(2))); // 保留两位小数
  
  // 返回left百分比的字符串形式
  return `${clampedLeftPercent}%`;
}
</script>
<style scoped>
.block_select_contain >>> .el-input__wrapper {
  background-color: unset !important;
  color: #05132b;
  box-shadow: 0 0 0 1px #00EAFF inset;
}
.yz-select-server{
  display: flex;
  justify-content: space-between;
  padding-bottom: 2vh;
}
.yz-box-items{
  display: flex;
  box-shadow: inset 0 0 18px 1px rgba(0,255,255,0.59);
  .yz-box-item{
    display: flex;
    align-content:center;

    .yz-box-item-text{
      width: 46px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      cursor: pointer;
    }
    .yx-box-item-selected{
      background: #35CB9C;
      color: white;
    }
  }
}

.yz-sm-title{
  border-left: 3px solid #D8D8D8;
  padding-left: 1vh;
  margin-left: 2vh;
  font-size: 1.5vh;
  margin-top: 1vh;
  margin-bottom: 0.5vh;
}

.yx-xs{
  display: flex;
  .yx-xs-6{
    display: flex;
    width: 50%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    .yx-car-item{
      margin: 0 1vh;
      width: 3vh;
    }
    .man{
      background-image: url("../assets/img/yzclientflow/man.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
    .women{
      background-image: url("../assets/img/yzclientflow/women.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
    .yx-car-content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 10px;
      .yx-car-content-text{
        font-size: 1.4vh;
        span{
          font-size: 1.6vh;
        }
      }
      .yx-car-content-num{
        padding-top: 2px;
        font-size: 1.6vh;
      }
    }
  }
}

.yz-process-items{
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding: 3vh;
  width: 100%;
  .yz-process-item{
    position: relative;
    display: flex;
    font-size: 14px;
    line-height: 3vh;
    .province{
      font-size: 14px;
      padding-right: 2vh;
    }
    .nums{
      font-size: 14px;
    }
    .process-parent{
      position: absolute;
      top: 1vh;
      left: 12vh;
      right: 1vh;
      padding-right: 3vh;
      .process{
        height: 10px;
        background: #cccccc;
        border-radius: 3px;
        div{
          background-image: linear-gradient(90deg, #4485C2 0%, #70A3D1 100%);
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
          height: 10px;
        }
      }
      .rate{
        position: absolute;
        right: -1.2vh;
        top: -1vh;
      }
    }
  }
}

.yz-box-item-colums{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2vh;
  .yz-box-item-colum{
    display: flex;
    justify-content: center;
    border: 1px solid #35CB9C;
    cursor: pointer;
    .yx-li{
      padding: 0.5vh;
      font-size: 14px;
    }
    .yx-li-select{
      background: #35CB9C;
    }
  }
}

.map_info_title {
  margin-bottom: 1.5vh;
  font-size: 1.3vh;
  background: url("../assets/img/public/形状 866.png") no-repeat;
  background-size: 100% 100%;
  width: 12vh;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
}


.map-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;

  .map-legend-item {
    display: flex;
    margin-bottom: 1vh;
    margin-right: 2vh;
    font-size: 1.4vh;
    cursor: pointer;

    span {
      padding-left: 1vh;
      position: relative;
      top: 5px;
    }
  }
}


.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 1.2vh;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  justify-content: flex-end;
  width: 50vh;
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}
.top2{
  top: 1vh;
}
.yz-box2-items{
  display: flex;
  .yz-box2-item{
    border: 2px solid rgba(0,234,255,0.22);
    margin-right: 1vh;
    padding: 0.5vh;
    position: relative;
    border-radius: 1vh;
    .yz-box2-p{
      display: flex;
      justify-content: center;
      .down{
        background: url("../assets/img/yztraffic/down.png") no-repeat;
        width: 1.4vh;
        height: 1.4vh;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
      .up{
        background: url("../assets/img/yztraffic/up.png") no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
    }
    .center{
      font-size: 1.4vh;
    }
  }
}






</style>
